<template>
	<view>
		<view class="header">
			<!-- 轮播图区域 -->
			<swiper class="swiper" style="height: 250px;"  :indicator-dots="true" :autoplay="true" circular :interval="3000" :duration="1000">
				<swiper-item style="height: 250px;" v-for="item in swipers" :key="item.id">
					<image style="height: 250px;" :src="item.imguri" mode=""></image>
				</swiper-item>
			</swiper>
			<!-- <image src="../../../static/img/swiper.jpg" mode=""></image> -->
		</view>
		<view class="disa">
			<!-- <view class="disj" @click="inform_details(lists.noticeId)"> -->
			<view class="disj" @click="navRouter(`/pages/tabbar/work/inform_details?id=${lists.noticeId}`)"> 
				<image class="bulletin" src="../../../static/img/work/notices.png" mode=""></image>
				<view class="ml10 w80">{{lists.noticeTitle}}</view>
			</view> 
			<image @click="navRouter(`/pages/tabbar/work/inform_list`)" style="width: 10px;height: 13px;" src="@/static/img/work/details.png" mode=""></image>
			
		</view>
		<view class="flexWarp w100 color32">
			<view class="borde_r_cs flexWarp juCen" @click="handlegrids(item.url)" v-for="(item,index) in gridList" :key="index" >
				<image :src="item.icon" mode=""></image>
				<view class="f14">{{item.value}}</view>
			</view>
		</view> 
	</view>
</template>

<script>
	import uniGrid from "@/components/uni-grid/uni-grid.vue"
	import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
	import Tabber from "../../../components/bottom.vue"
	import submit from "@/serve/api/submit.js"
	import {
		uniList,
		uniListItem,
		uniListChat,
	} from '@dcloudio/uni-ui'
	import {mapGetters} from "vuex" 
	export default {
		components: {
			uniGrid,
			uniGridItem,
			uniList,
			uniListItem,
			uniListChat,
			Tabber
		},
		computed:{
			...mapGetters([
				'getUserInfo',
			])
		},
		data() {
			return {
				lists:'',
				swipers:[
					{
						id:0,
						imguri:"../../../static/img/work/carousel.png",
					}
					
				],
				gridList: [
					{
						id: 0,
						icon:"../../../static/img/work/maintain.png",
						value: "保养",
						url:"/pages/gird/toMaintain/toMaintain"
					},
					{
						id: 1,
						icon:"../../../static/img/work/service.png",
						value: "维修",
						url: "/pages/gird/awaiting/awaiting?isOverhaul=1"
					},
					{
						id: 2,
						icon:"../../../static/img/work/annual.png",
						value: "年检",
						url: "/pages/gird/yearlyInspection/index"
					},
					{
						id: 3,
						icon:"../../../static/img/work/polling.png",
						value: "巡检",
						url: "/pages/tabbar/polling/polling"
					},
					{  
						id: 4,
						icon:"../../../static/img/work/fault.png",
						value: "故障码",
						url: "/pages/gird/faultCode/faultCode"
					},
					{
						id: 5,
						icon:"../../../static/img/work/install.png",
						value: "安装",
						url: "/pages/gird/install/install"
					},
					{
						id: 6,
						icon:"../../../static/img/work/accessories.png",
						value: "配件申请",
						url: "/pages/gird/farts/farts"
					},
					{
						id: 7,
						icon:"../../../static/img/work/overhaul.png",
						value: "大修",
						url: "/pages/gird/awaiting/awaiting?isOverhaul=0"
					},
					{
						id: 8,
						icon:"../../../static/img/work/market.png",
						value: "销售",
						url: "/pages/gird/market/market"
					},
					
				],
				
			}
		},
		onLoad() {
			this.inform()
		},
		methods: {
			//查询公告列表
			async inform() {
				let parme = {
					pageNum:1,
					pageSize:1,
				}
				const res = await submit.selectNoticeList(parme);
				if(res){
					this.lists = res.data.data[0]
				}
			},
			
			// 宫格跳转
			handlegrids(url) {
				
				this.navRouter(url,true)
			},
		}
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
	}
	.flexWarp {
	    display: flex;
	    flex-wrap: wrap;
	}
	.borde_r_cs {
		width: 30%;
		margin: 20px 1.6%;
		flex-direction: column;
		align-items: center;
	}
	
	.borde_r_cs>image {
		width: 50px;
		height: 50px;
	}
	page {
		background: #FFFFFF;
		width: 100%;
		margin-bottom: 88rpx;
	}

	view {
		font-size: 28rpx;
		line-height: 1.8;

	}
	.bottom{
		position: fixed;
		bottom: 0;
		z-index: 9999;
	}
	.header {
		width: 750rpx;
	}

	.header image {
		width: 100%;
		height: 400rpx;
		vertical-align: top;
	}

	/* 宫格 */
	.gird {
		width: 750rpx;
		/* height: 400rpx; */
		margin: 0 auto;
		border: none;
		background-color: #EBEBEB;
	}

	.grid-text text {
		line-height: 2.8;
	}

	.grid-text image {
		width: 88rpx;
		height: 88rpx;
		box-shadow: 0px 10px 10px 0px rgba(255, 138, 152, 0.1);
		vertical-align: middle;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;

	}

	.grid-text text {
		display: block;
		font-size: 24rpx;
		text-align: center;
	}

	/* 咨询列表 */
	.new-content {
		/* width: 670rpx;
		margin: 0 auto; */
	}

	.uni-list-item {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #34363D;
		
	}
	
	.new-list {
		width: 100%;
		margin:0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1rpx solid #E0E1EA;
		top: 0;
		padding: 30rpx 0;
	}

	.mew-list image {
		width: 100rpx;
		height: 131rpx;
		background: #989DBB;
		border-radius: 6px;
		vertical-align: middle;
	}

	.list-left-text {
		font-size: 33rpx;
		color: #34363D;
		font-weight: bold;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.list-left-time {
		font-size: 25rpx;
		color: #989BA6;
	}

	.lsit-right image {
		margin-left: 35rpx;
		width: 233rpx;
		height: 151rpx;
		border-radius: 6px;
		vertical-align: middle;
	}
	.disa{
		width: 100%;
		padding: 10px 20px;
		box-sizing: border-box;
		background-color: #F9F9F9;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.disj{
		width: 90%;
		display: flex;
		align-items: center;
	}
	.bulletin{
		width: 40px;
		height: 30px;
	}
	.ml10{
		margin-left: 10px;
	}
	.w80{
		width: 80%;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
</style>
